<template>
  <div class="lock-box">
    <div class="lock-content">
      <div class="unlock-box" style="cursor: pointer" @click="showUnlock = !showUnlock">
        <n-icon size="100" color="#ffffff">
          <IconUnlockOutlined />
        </n-icon>
      </div>
      <n-form ref="formRef" :inline="true" justify-center :model="formValue" :rules="rules">
        <n-form-item path="lockPassword">
          <n-input-group v-if="showUnlock" mt-20 w-300>
            <n-input v-model:value="formValue.lockPassword" placeholder="请输入登录密码" />
            <n-button type="primary" @click="unlock"> 解锁 </n-button>
          </n-input-group>
        </n-form-item>
      </n-form>
    </div>
    <div class="lock-footer">
      <div class="typing-effect">
        {{ nowTime }}
      </div>
    </div>
  </div>
</template>

<script setup>
import dayjs from 'dayjs'
import { IconUnlockOutlined } from '@/components/app-icons/index.js'
import { useAppStore } from '@/store/modules/app.js'
import { onBeforeUnmount, ref, shallowReactive, shallowRef } from 'vue'
import { useMessage } from 'naive-ui'
import { unLockScreen } from '@/api/auth/index.js'
const appStore = useAppStore()
const message = useMessage()
let formRef = ref(null)
const formValue = shallowReactive({
  lockPassword: '',
})
const rules = {
  lockPassword: {
    required: true,
    message: '请输入解锁密码',
    trigger: 'blur',
  },
}
let showUnlock = shallowRef(false)
let nowTime = shallowRef(formatDateTime(new Date()))
let timer = null
timer = setInterval(() => {
  nowTime.value = formatDateTime(new Date())
}, 1000)
const unlock = () => {
  formRef.value?.validate((errors) => {
    if (!errors) {
      // unLockScreen({ password: formValue.value.lockPassword }).then((res) => {
      // console.log(res)
      // if (res.data.unlock) {
      message.success('解锁成功')
      appStore.setLockScreen(false)
      // }
      // })
    }
  })
}
onBeforeUnmount(() => {
  clearInterval(timer)
  timer = null
})
function formatDateTime(time = '') {
  return dayjs(time).format('YYYY年MM月DD日 HH:mm:ss')
}
</script>

<style scoped lang="scss">
.lock-box {
  width: 100vw;
  height: 100vh;
  background: #000000;
  display: flex;
  flex-direction: column;
  .lock-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .unlock-box {
      width: 200px;
      height: 200px;
      border: 1px solid #ffffff;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .lock-footer {
    width: 100%;
    padding: 20px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 45px;
    color: #ffffff;
  }
  .typing-effect {
    width: 20.7ch;
    line-height: 52px;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid;
    animation: typing 2s steps(22), effect 0.5s step-end infinite alternate;
  }
}
@keyframes typing {
  from {
    width: 0;
  }
}

@keyframes effect {
  50% {
    border-color: transparent;
  }
}
</style>
